<template>
  <div class="cashier-page">
    <div style="margin-bottom: 15px;">
      <h3>收银台</h3>
    </div>

    <!-- 搜索区域 -->
    <div class="search-container">
      <!-- 动态渲染类型 -->
      <el-select v-model="searchType" placeholder="请选择类型" @change="handleTypeChange">
        <el-option v-for="category in billCategoryList" :key="category.billCategoryId"
          :label="category.billCategoryName" :value="category.billCategoryName"></el-option>
      </el-select>

      <el-input v-model="searchKey" placeholder="输入姓名、手机、房号、车牌" style="width: 300px; margin-left: 10px;"
        @keyup.enter.native="handleSearch"></el-input>

      <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
    </div>

    <!-- 按钮栏 -->
    <div class="button-group">
      <el-button type="primary">收款</el-button>
      <el-button>添加临时收费</el-button>
      <el-button>预存</el-button>
      <el-button>打印</el-button>
    </div>

    <!-- 费用表格 -->
    <el-table :data="paginatedItems" style="width: 100%" border>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="billType" label="类型"></el-table-column>
      <el-table-column prop="number" label="编号" width="120"></el-table-column>
      <el-table-column prop="pricingName" label="费用名称"></el-table-column>
      <el-table-column prop="timePeriod" label="时间周期"></el-table-column>
      <el-table-column prop="settingPrice" label="单价"></el-table-column>
      <el-table-column prop="billNumber" label="数量"></el-table-column>
      <el-table-column prop="billSum" label="应收金额"></el-table-column>
      <el-table-column prop="payableSum" label="应缴金额"></el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="total" style="margin-top: 20px; text-align: right;">
    </el-pagination>
  </div>
</template>

<script>
import request from '@/utils/request';
export default {
  name: 'CashierPage',
  data() {
    return {
      searchType: '', // 动态类型
      searchKey: '',
      showResidentList: false,
      selectedResident: null,

      // 账单数据
      feeList: [],
      billCategoryList: [], // 类型数据
      currentPage: 1,
      pageSize: 5,
      total: 0
    };
  },
  computed: {
    // 计算当前页的数据
    paginatedItems() {
      return this.feeList;
    },
    // 计算总页数
    totalPage() {
      return Math.ceil(this.total / this.pageSize);
    }
  },
  created() {
    // 获取类型数据
    this.getTypeData();
    // 获取账单数据
    this.fetchBillData();
  },
  methods: {
    // 获取类型数据
    getTypeData() {
      request.get("/billCategory/list")
        .then(res => {
          if (res.code === 200) {
            this.billCategoryList = res.data;
          }
        })
        .catch(error => {
          console.error('获取类型数据失败:', error);
        });
    },

    // 获取账单数据
    fetchBillData() {
      const params = {
        page: this.currentPage,
        size: this.pageSize,
        billType: this.searchType,
        search: this.searchKey
      };

      request.post('/bill/getBillByTypeOrSearch', params)
        .then(res => {
          if (res.code === 200) {
            this.feeList = res.data.records || [];
            this.total = res.data.total;
          }
        })
        .catch(error => {
          console.error('获取账单数据失败:', error);
        });
    },

    handleTypeChange(value) {
      this.fetchBillData();
    },

    handleSearch() {
      this.currentPage = 1;
      this.fetchBillData();
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1; // 切换每页显示条数时，默认回到第一页
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchBillData();
    }
  }
};
</script>
<style scoped>
.cashier-page {
  padding: 20px;
  background-color: #f5f7fa;
}

.search-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 10px;
}

.button-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
}

.el-table {
  margin-bottom: 20px;
}

.custom-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.custom-pagination .goto input {
  text-align: center;
}

.custom-pagination .page-numbers span {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 2px;
}

.custom-pagination .page-numbers span.current {
  background-color: #409eff;
  color: #fff;
}

.custom-pagination .page-numbers span:disabled {
  color: #ccc;
  cursor: not-allowed;
}

.custom-pagination .page-numbers span:active {
  background-color: #f5f5f5;
}
</style>